<template>
  <div>
    <!-- 职位推荐-轮播图 区域-->
    <div class="lun-container">
      <!-- 功能区域 -->
      <div class="adv-container">
        <!-- 职位推荐 -->
        <div class="job-adv-container">
          <div
            class="job-item-block"
            v-for="(item, index) in jobAdv"
            :key="index"
            @click="
              $router.push({
                name: 'toll',
                params: {
                  direction: item.rPath.flagDirection,
                  type: item.rPath.flagType,
                  level: item.rPath.flagLevel,
                },
              })
            "
          >
            <img :src="item.img" alt="" />
            <div class="job-info">
              <div class="job-name">{{ item.jobName }}</div>
              <div class="job-desc">{{ item.jobDesc }}</div>
            </div>
          </div>
        </div>
        <!-- 轮播图 -->
        <el-carousel
          class="lun-adv-container"
          :interval="2500"
          arrow="always"
          trigger="click"
        >
          <el-carousel-item v-for="(item, index) in advImg" :key="index">
            <img :src="item.courseImg" alt="" @click="gotoDetail(item.id)" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <div class="main-container">
      <adv-course
        :type="'新上好课'"
        :options="['推荐', '前端开发', '后端开发']"
      ></adv-course>
      <adv-course
        :type="'进站必学'"
        :options="['推荐', '计算机基础', '前端开发', '后端开发']"
      ></adv-course>
      <adv-course
        :type="'学习路线'"
        :options="['推荐', '前端开发', '后端开发', '移动开发']"
      ></adv-course>
    </div>
  </div>
</template>
<script>
import AdvCourse from "./components/advCourse.vue";
import { getAdvCourse } from "@/services/homeCourse";
export default {
  components: {
    AdvCourse,
  },
  data() {
    return {
      jobAdv: [
        {
          img: require("@/assets/icon/home/java.jpg"),
          jobName: "Java开发工程师",
          jobDesc: "综合就业率第一",
          rPath: {
            flagDirection: 0,
            flagType: 0,
            flagLevel: 1,
          },
        },
        {
          img: require("@/assets/icon/home/h5.jpg"),
          jobName: "前端工程师",
          jobDesc: "入门快、就业快、岗位多",
          rPath: {
            flagDirection: 1,
            flagType: 0,
            flagLevel: 1,
          },
        },
        {
          img: require("@/assets/icon/home/python.jpg"),
          jobName: "Python工程师",
          jobDesc: "应用领域最广泛",
          rPath: {
            flagDirection: 0,
            flagType: 4,
            flagLevel: 1,
          },
        },
        {
          img: require("@/assets/icon/home/web.jpg"),
          jobName: "Web前端架构师",
          jobDesc: "培养前端P7级架构师",
          rPath: {
            flagDirection: 1,
            flagType: 7,
            flagLevel: 2,
          },
        },
        {
          img: require("@/assets/icon/home/javaJia.jpg"),
          jobName: "Java架构师P7",
          jobDesc: "千万级电商架构0-100",
          rPath: {
            flagDirection: 0,
            flagType: 0,
            flagLevel: 3,
          },
        },
      ],
      advImg: [],
    };
  },
  methods: {
    getLunCourse() {
      getAdvCourse().then((res) => {
        const data = res.data;
        if (data.data) {
          this.advImg = data.data || [];
        }
      });
    },
    gotoDetail(id) {
      this.$myUtils.OpenNewWindow("/courseDetail", { id });
    },
  },
  created() {
    this.getLunCourse();
  },
};
</script>
<style lang="scss" scoped>
.lun-container {
  width: 100%;
  background-color: white;
  background-image: linear-gradient(
    to bottom,
    rgba(218, 245, 239, 1),
    rgba(218, 245, 239, 0)
  );
  .adv-container {
    display: flex;
    width: 1152px;
    height: 382px;
    padding: 32px 0;
    margin: 0 auto;
    // border-radius: 8px;
    .job-adv-container {
      display: flex;
      flex-direction: column;
      width: 256px;
      height: 100%;
      background-color: #39364d;
      color: white;
      padding: 11px 0;
      box-sizing: border-box;
      border-radius: 8px 0 0 8px;
      .job-item-block {
        display: flex;
        // width: 100%;
        height: 45px;
        padding: 13.5px 0;
        margin: 0 25px;
        cursor: pointer;
        user-select: none;
        img {
          width: 45px;
          height: 45px;
          padding-right: 8px;
        }
        .job-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          // height: 100%;
          .job-name {
            font-size: 16px;
            width: 100%;
          }
          .job-desc {
            font-size: 12px;
            width: 100%;
          }
        }
      }
    }
    .lun-adv-container {
      width: 896px;
      height: 100%;
      ::v-deep .el-carousel__container {
        height: 100%;
        .el-carousel__item {
          width: 100%;
          img {
            width: 100%;
            height: 382px;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.main-container {
  width: 100%;
  padding-bottom: 100px;
  > div {
    width: 1152px;
    margin: 0 auto;
    padding: 32px 0;
  }
}
</style>